// use jsx to render html, do not modify simple.html
import ScrollAnim from 'rc-scroll-anim';
import React from 'react';
import ReactDOM from 'react-dom';
import QueueAnim from 'rc-queue-anim';
import './assets/index.less';

const Link = ScrollAnim.Link;
const ScrollOverPack = ScrollAnim.OverPack;
const EventListener = ScrollAnim.Event;

// ScrollAnim.scrollScreen({scrollInterval: 600});
class Demo extends React.Component {
  componentDidMount() {
    // 添加改变窗口事件,可加setTimeout
    EventListener.addEventListener('resize.userResize', this.barAnimate.bind(this));
  }

  onFocus = (e) => {
    console.log(e, 'focus');
    this.dom = e.target;
    this.barAnimate();
  }

  onBlur = (e) => {
    console.log(e, 'blur');
  }

  onChange = (e) => {
    console.log(e);
  }

  barAnimate = () => {
    if (!this.dom) {
      return;
    }
    const bar = this.bar;
    bar.style.left = `${this.dom.getBoundingClientRect().left}px`;
  }

  render() {
    return (<div>
      <div className="nav">
        <div className="logo">
          <p>Ant Motion</p>
        </div>
        <div className="nav-wap">
          <Link className="nav-list" to="page0" showHeightActive={['50%', '10%']}
                onFocus={this.onFocus}
                onBlur={this.onBlur}
          >
            Example
          </Link>
          <div ref={(c) => {
            this.bar = c;
          }} className="nav-bar" />
        </div>
      </div>
      <ScrollOverPack id="page1" className="page1">
        <QueueAnim
          key="1"
          type="bottom"
          leaveReverse
        >
          <div key="0" className="demo-content" style={{
            height:500,
            justifyContent: 'center',
            alignItems: 'center',
            display: 'flex',
          }}>
            adsada
          </div>
        </QueueAnim>
      </ScrollOverPack>
    </div>);
  }
}

ReactDOM.render(<Demo />, document.getElementById('__react-content'));
